<template>
  <div class="col main-content">
    <div class="row tool-bar">
      <div class="col">
        <el-input style="width: auto" placeholder="请输入查询信息"></el-input>
        <el-button type="primary"><i class="icon icon-search"></i></el-button>
        <el-button type="primary"><i class="fa fa-truck"></i> 添加快递</el-button>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <el-table
          :data="expresses"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            label="#" width="52">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column
            label="名称"
            width="120">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="编码"
            width="120">
          </el-table-column>
          <el-table-column
            prop="logo"
            label="logo"
          >
          </el-table-column>

          <el-table-column
            prop="orderNum"
            label="顺序"
            min-width="48"
          >
          </el-table-column>

          <el-table-column label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isShow==0" type="text" size="mini"
                         @click="changeStatus(scope.$index, scope.row)">
                显示
              </el-button>
              <el-button v-else="scope.row.isShow==1" size="mini" type="text"
                         @click="changeStatus(scope.$index, scope.row)">
                隐藏
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<style>

</style>
<script>
  import AdminService from 'src/service/admin'

  export default {
    name: 'AdminSystemTruck',
    data() {
      return {
        expresses: [],
        search: {
          orderBy: 'order_num asc',
          pagination: {
            total: 0,
            page: 1,
            limit: 100
          }
        }
      }
    },
    methods: {
      getData: function () {
        const me = this
        AdminService.searchExpress(me.search).then(function (datas) {
          me.expresses = datas.datas
        })
      },
      changeStatus: function (index, data) {
        const me = this
        const params = {
          id: data.id,
          isShow: data.isShow === 0 ? 1 : 0
        }
        AdminService.express(params).then(function (datas) {
          if (datas.datas != null && datas.datas.length > 0) {
            me.$set(data, 'isShow', params.isShow)
            me.$message.success('更新数据成功.')
          } else {
            me.$message.error('更新数据失败!')
          }
        })
      }
    },
    beforeMount: function () {
      this.getData()
    }
  }
</script>
